<script setup lang="ts">
import { computed } from "vue";
import Taro, { useRouter, useShareAppMessage } from "@tarojs/taro";

// import Stall from "./components/Stall.vue";
import Page from "@/components/common/Page.vue";
import ByIcon from "@/components/ui/ByIcon.vue";
import ByButton from "@/components/ui/ByButton.vue";
import IndentationBar from "@/components/common/IndentationBar.vue";

import useFetch from "@/hooks/useFetch";
import ApiActivity from "@/api/activity";

import { TActivity } from "@/global";
import { richTextFormater } from "@/utils";

const { params } = useRouter<{
  // 活动ID
  act_id: string;
}>();

// 查询活动详情
const { data: activityData } = useFetch<TActivity>(
  ApiActivity.activityDetailConsumer,
  {
    defaultParams: { id: +params.act_id },
    afterFetch: (res: any) => res.detail,
  }
);

// banner图
const swiperList = computed(() => {
  const { title_img, pic_content } = activityData.value || {};
  if (pic_content || title_img) {
    return (pic_content || title_img).split(";");
  }
  return [];
});

const handleEvent = (tid: number) => {
  Taro.navigateTo({
    url: `/packageActivity/pages/activity/etimeDetail?act_id=${params.act_id}&tid=${tid}`,
  });
};

useShareAppMessage(() => {
  const { id, title, title_small_img } = activityData.value || {};
  return {
    title,
    imageUrl: title_small_img || "/static/images/app-share.jpg",
    page: `/packageActivity/pages/activity/detail?act_id=${id}`,
  };
});
</script>

<template>
  <Page hiddenHeaderBg footerSticky body-flex>
    <template
      #footer
      v-if="activityData?.is_ticket && activityData?.is_ticket == 1"
    >
      <view class="bg-light">
        <view class="flex items-center py-3 px-5" :class="['justify-between']">
          <view class="relative text-dark text-center">
            <!-- <template v-if="applyDetail.deposit_status == 1">
              <text class="text-2xl">已交押金￥{{ applyDetail.deposit_amount / 100 }}</text>
              <view class="text-xs">活动结束将在15个工作日内返还</view>
            </template>
            <text v-else-if="applyDetail.deposit_status == 2" class="text-2xl"></text> -->

            <ByIcon name="Share" :size="46" class="bold" />
            <view class="text-xs">分享</view>
            <button
              class="absolute top-0 left-0 w-full h-full z-10 opacity-0"
              open-type="share"
            />
          </view>

          <ByButton
            class="w-[360px] bg-dark"
            @tap="handleEvent(activityData?.ticket_id)"
          >
            {{ "购买权益包" }}
          </ByButton>
        </view>
        <view class="safe-footer" />
      </view>
    </template>

    <scroll-view class="absolute top-0 left-0 w-full h-full" :scroll-y="true">
      <view class="p-3">
        <view class="relative p-3 bg-primary rounded-t-lg">
          <!-- S 轮播图 -->
          <swiper
            class="h-[295px]"
            indicator-active-color="rgba(0,0,0,.6)"
            :indicator-dots="true"
            :autoplay="swiperList.length > 1"
            :circular="swiperList.length > 1"
          >
            <swiper-item v-for="(item, index) in swiperList" :key="index">
              <image
                :src="item"
                class="w-full h-full rounded-md"
                mode="aspectFill"
              />
            </swiper-item>
          </swiper>
          <!-- E 轮播图 -->
        </view>

        <IndentationBar />

        <view class="relative p-3 bg-primary rounded-b-lg">
          <!-- S 基本信息 -->
          <view class="mt-1 text-light text-xl">{{ activityData?.title }}</view>

          <view
            class="flex items-center mt-6 h-[72px] bg-light rounded-full px-3 text-dark"
          >
            <text class="text-sm">时间</text>
            <view class="ml-2.5 text-xs whirespace-pre">{{
              activityData?.act_time
            }}</view>
          </view>

          <view
            class="flex items-center mt-2 h-[72px] bg-light rounded-full px-3 text-dark"
          >
            <text class="flex-none text-sm">地点</text>
            <view class="flex-auto ml-2.5 text-xs line-clamp">
              {{ activityData?.street || activityData?.address }}
            </view>
            <!-- <image src="/static/images/location.png" class="flex-none ml-3 w-[42px]" mode="widthFix" /> -->
          </view>
          <!-- E 基本信息 -->

          <!-- S 活动介绍 -->
          <template v-if="activityData?.act_desc">
            <view class="mt-6 text-light text-xl">活动详情 </view>
            <view class="mt-1 bg-[#dfc3a1] p-3 rounded-lg text-dark">
              <rich-text :nodes="richTextFormater(activityData?.act_desc)" />
            </view>
          </template>
          <!-- E 活动介绍 -->

          <!-- S 购买须知-->
          <template v-if="activityData?.purchase_notice">
            <view class="mt-6 text-light text-xl">购买须知</view>
            <view class="mt-1 bg-[#dfc3a1] p-3 rounded-lg text-dark">
              <rich-text
                :nodes="richTextFormater(activityData?.purchase_notice)"
              />
            </view>
          </template>
          <!-- E 购买须知 -->

          <!-- S 规则介绍-->
          <template v-if="activityData?.exhibition_rules">
            <view class="mt-6 text-light text-xl">活动介绍 </view>
            <view class="mt-1 bg-[#dfc3a1] p-3 rounded-lg text-dark">
              <rich-text
                :nodes="richTextFormater(activityData?.exhibition_rules)"
              />
            </view>
          </template>
          <!-- E 购买须知 -->
        </view>
      </view>
    </scroll-view>
  </Page>
</template>
